<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>话题-乐热评</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="css/global.css">
    <link rel="stylesheet" type="text/css" href="./alicon/iconfont.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/comment.css">
    <script src="js/aes.js"></script>

</head>
<body class="mbg">

<!-- 你的HTML代码 -->
<div class="layui-header header header-doc ">
    <div class="layui-main pbg">
        <a class="logo" href="./index.html"><img src="img/logo.png"/>
        </a>
        <ul class="layui-nav layui-layout-left" lay-filter="">
            <li class="layui-nav-item layui-this"><a href="./index.html">首页</a></li>
            <li class="layui-nav-item"><a href="./search.html">搜索</a></li>

            <li class="layui-nav-item"><a href="./event.html">动态</a></li>
            <li class="layui-nav-item layui-layout-right">
            </li>
        </ul>
    </div>
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</div>


<div class="layui-main pbg">


    <div class="layui-row">
        <div class="child-head">
            <h1>
                <i class="icon iconfont icon-erji" style="color: salmon"></i>

                音乐分享
            </h1>
            <p class="child-desc">一个人的故事有一千种声音，总会有一种是你想发现的。</p>
        </div>
        <hr>
        <div class="layui-row btn-group">
            <button class="child-btn button_border" data-button="red" data-name="new">最新</button>
            <button class="child-btn button_border" data-button="green" data-name="hot">热门</button>
            <button class="child-btn button_border" data-button="blue" data-name="rand">随机</button>
            <button class="child-btn button_border" data-button="purple" data-name="focus">关注</button>
        </div>

        <div class="btn-group child-btn">
<span class="topic-search" id="topic-search">
<input id="searchInput" class="search-input" type="text" placeholder="搜索音乐">
<button class="search-btn btn">搜索</button>
<button class="search-btn btn">分享音乐</button>
</span>
        </div>
        <hr>
    </div>

    <div class="layui-row">
        <div class="layui-col-md9">
            <div id="content" class="comment">
                &nbsp;
            </div>
        </div>

        <div class="layui-col-md3">
            <div class="layui-row ">
                <div class="layui-row ws18 up25">活动</div>
                <hr>
                <ul>
                    <div class="announcement">
                        <li><a>活动1..............</a></li>
                        <li><a>活动2..............</a></li>
                        <li><a>活动3..............</a></li>
                    </div>
                </ul>
                <hr>
            </div>
            <div class="layui-row">
                <div class="ws18">附近</div>
                <hr>
                <ul class="nearby"></ul>
                <hr>
            </div>
        </div>


    </div>
</div>
<div class="footer">
    &copy;Copyright 2018 乐热评<br>
    感谢：<a>Layui</a>,<a>Bootstrap</a>,<a>网易云</a>,<a>QQ音乐</a>,<a>酷我音乐</a>...<br>
    联系我们：<a href="mailto:amoxuk@aliyun.com">amoxuk#aliyun.com(#换成@)</a>
</div>


</div>
<script src="layui/layui.js"></script>


<script type="text/javascript" src="js/jquery-1.12.0.min.js"></script>
<script src="js/jquery.session.js"></script>
<script type="text/javascript" src="js/jquery.flexText.js"></script>
<script src="js/reply.js"></script>
<script src="js/top.js"></script>

<script>
    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use(['element', 'layer'], function () {
        var element = layui.element;
        var layer = layui.layer;

        var type = "new";

        $('#content.comment').on('click', '.hf-pl', function () {
            var oThis = $(this);
            //获取输入内容
            console.log("this is in self page");
            var content = oThis.siblings('.flex-text-wrap').find('.comment-input').val();
            console.log(content);
            if (content.replace(/^ +| +$/g, '') === '' || content.trim().length < 1) {
                /*输入内容为空*/
                layer.msg("输入内容为空。");
                return false;
            } else {
                var loadIdx = layer.load(1);
                var rcid = oThis.attr("data-id");
                if (!oThis.parents('.comment-show').length) {
                    rcid = 0;
                    /*如果是根列表回复，回复ID设置为0*/
                }
                var bcid = oThis.parents('.commentAll').siblings('.inline').find('.comment').attr("data-id");
                if (!bcid) {
                    bcid = rcid;
                }
                $.ajax({
                    url: '/music/' + bcid + "/" + rcid
                    , type: 'post'
                    , data: {"data": aes.encrypt(content)}
                    , success: function (res) {
                        layer.close(loadIdx);
                        if (res.status === 0) {
                            layer.msg("发表成功");
                            var oHtml = buildReply(res.data);
                            addReply(oHtml, oThis);
                            return false;
                        } else {
                            layer.alert(res.msg);
                        }
                        return false;
                    },
                    error: function (res) {
                        layer.close(loadIdx);
                        layer.alert("错误码：" + res.status + "<br>" + res.statusText);
                        return false;
                    }
                });


            }
        });
        <!--分享-->
        (function () {
            $('#content.comment').on('click', '.share', function () {
                var dom = $(this);
                var did = dom.attr('data-id');
                var text = "给你分享一个来自乐热评的消息：" +
                    dom.parents('.card_detail').find('.card_text').text() +
                    "\n点击查看原文：http://localhost/music/comment.html?id=" + did;
                layer.prompt({
                    formType: 2,
                    value: text,
                    title: '复制内容分享',
                }, function (value, index, elem) {
                    layer.close(index);
                });
            });
        })();
        <!--点赞-->
        (function () {
            $('#content').on('click', '.like,a.date-dz-z', function () {
                var thumbNum = $(this).find('num').html();
                console.log("当前点赞数:" + thumbNum);
                var dom = this;
                if ($.cookie('user') == null) {
                    layer.msg("点赞需要登录。");
                    return false;
                } else {
                    var cid = $(this).attr('data-id');
                    var links;
                    if ($(this).attr('class').find('like')) {
                        links = '/like/share/' + cid
                    } else
                        links = '/like/shareComment/' + cid
                    $.ajax({

                        url: links
                        , type: 'post'
                        , success: function (res) {
                            layer.msg(res.msg);
                            if (res.status === 0) {
                                /*操作成功*/
                                if (res.count === 1) {
                                    /*点赞*/
                                    thumbNum++;
                                    if ($(dom).find('.iconfont').length) {
                                        $(dom).find('.iconfont').addClass('icon-dianzan1').removeClass('icon-dianzan');
                                    } else {
                                        $(dom).addClass('date-dz-z-click');
                                        $(dom).find('.date-dz-z-click-red').addClass('red');
                                    }
                                    $(dom).find('num').html(thumbNum);

                                } else {
                                    /*取消点赞*/
                                    thumbNum--;
                                    if ($(dom).find('.iconfont').length) {
                                        /*主页面*/
                                        $(dom).find('.iconfont').addClass('icon-dianzan').removeClass('icon-dianzan1');
                                    } else {
                                        $(dom).removeClass('date-dz-z-click red');
                                        $(dom).find('.date-dz-z-click-red').removeClass('red');
                                    }
                                    $(dom).find('num').html(thumbNum);

                                }
                            } else {
                                layer.msg(res.msg);
                            }
                        }
                        , error: function (res) {
                            layer.msg("错误码：" + res.status + "<br>" + res.statusText);
                        }
                    });
                    return false;
                }
            });
        })();

        function flowLoad(url) {
            /*对搜索 点击的内容进行流加载*/
            $('#content').html("");
            layui.use('flow', function () {
                var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
                var flow = layui.flow;
                flow.load({
                    elem: '#content' //指定列表容器
                    , done: function (page, next) { //到达临界点（默认滚动触发），触发下一页
                        setTimeout(function () {
                            var lis = [];
                            $.get(url + '?limit=10&offset=' + (page - 1) * 10, function (res) {
                                if (res.status === 1) {
                                    layer.msg(res.msg);
                                    return false;
                                }
                                //假设你的列表返回在data集合中
                                layui.each(res.data, function (index, result) {
                                    var tmp = '<li class="card clearfix">' +
                                        '<div class="float_left">' +
                                        '<img src=' + result.sendUser.icons + ' class="head"/>' +
                                        '</div>' +
                                        '<div class="card_detail">' +
                                        '<div class="card_nick">' +
                                        '<a href='+zone(result.sendUser.uid)+' target="_blank" class="W_f14 W_fb S_txt1">' + result.sendUser.nickname + '</a>' +
                                        '</div>' +
                                        '<div class="card_time">' + result.ctime + '</div>' +
                                        '<i class="layui-icon layui-icon-headset" style="color: #1E9FFF;"></i>   <a>' + result.music.singer.name + '</a> 的<a  target="_blank" href="' + result.music.link +
                                        '" data-id="' + result.music.mid + '">《' + result.music.name +
                                        '》</a> 来自 <a>' + result.music.source.name + '</a>' +
                                        '<div class="card_text ws14">' + result.content + '</div>' +
                                        '<div class="layui-row">' +
                                        '<ul class="inline">' +
                                        '<li class="like" data-id="' + result.oid + '">' +
                                        '<a href="javascript:;" >';

                                    if (result.userLike) {
                                        tmp += '<i class="iconfont icon-dianzan1"></i>';
                                    } else {
                                        tmp += '<i class="iconfont icon-dianzan"></i>';
                                    }
                                    tmp += '<num>' + result.likes + '</num>' +
                                        '</a>' +
                                        '</li>' +
                                        '<li class="comment" data-id="' + result.oid + '">' +
                                        '<a href="javascript:;" ><i class="layui-icon">&#xe63a;</i>' +
                                        '</a>' +
                                        '</li>' +
                                        '<li class="share" data-id="' + result.oid + '">' +
                                        '<a href="javascript:;" ><i class="layui-icon">&#xe641;</i></a>' +
                                        '</li>' +
                                        '<li class="report" data-id="' + result.oid + '">' +
                                        '<a href="javascript:;" ><i class="layui-icon">&#xe6c5;</i></a>' +
                                        '</li>' +
                                        '</ul>' +
                                        '<div class="commentAll">' +
                                        '<div class="reviewArea clearfix"></div>' +
                                        '<div class="comment-show">';
                                    if (result.comment.length > 0) {
                                        var child = buildReply(result.comment);
                                        tmp += '<ul class="hf-list-con" style="display: block;">' + child + '</ul>';
                                    } else {
                                        tmp += '<ul class="hf-list-con"></ul>';
                                    }
                                    tmp +=
                                        '</div>' +
                                        '</div>' +
                                        '<div class="comment-pl-block clearfix">' +
                                        '<a href="../music/comment.html?id=' + result.oid + '" class="float_right">查看更多</a>' +
                                        '</div>' +
                                        '</div>' +
                                        '</div>' +
                                        '</li>';
                                    lis.push(tmp);

                                });
                                next(lis.join(''), page < res.count / 10);
                            });
                        }, 500);
                    }
                });
            });
        }

        /*头部分类信息，点击分流*/
        $('.btn-group').on('click', '.child-btn', function () {
            var name = $(this).attr('data-name');
            console.log(name);
            type = name;
            flowLoad('/music/' + type);
        });
        $('.child-btn[data-name="new"]').click();
        $('.search-btn').on('click', function () {
            var word = $(this).html();

            var topic = $('#searchInput').val();

            if (word === '搜索') {
                if (topic.length < 1) {
                    layer.msg("请输入内容");
                    return false;
                }
                var loadIdx = layer.load(1);
                flowLoad('/search/1002/' + topic);
                layer.close(loadIdx);

            } else if (word === '分享音乐') {
                var idx = layer.open({
                    type: 2,
                    title: '分享音乐',
                    maxmin: true,
                    shadeClose: true, //点击遮罩关闭层
                    area: ['1100px', '600px'],
                    content: 'music/share.html',
                    end: function () {
                        window.location.reload();
                    }
                });
            } else {
                return false;
            }
        });

    });
</script>
<script type="text/javascript" src="js/nearby.js"></script>
</body>
</html>